{% extends "AcmeDemoBundle::report.html.twig" %} {% block javascript %}
<script type="text/javascript" src="{{ asset('bundles/acmedemo/js/highcharts.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/acmedemo/js/exporting.js') }}"></script>
<link rel="stylesheet" type="text/css"
    href="{{ asset('bundles/acmedemo/css/default/easyui.css') }}" />
<link rel="stylesheet" type="text/css"
    href="{{ asset('bundles/acmedemo/css/icon.css') }}" />
<script type="text/javascript"
    src="{{ asset('bundles/acmedemo/js/jquery.easyui.min.js') }}"></script>
<script type="text/javascript">
	$(function(){
		 $("#list").hide();
		$.datepicker.regional[ "vi" ]
	    
		 $( "#tungay" ).datepicker({
			 dateFormat:"dd-mm-yy",
			 defaultDate: "+1w",
			 changeMonth: true,
			 changeYear: true,
			 numberOfMonths: 3,
			 onClose: function( selectedDate ) {
			 $( "#denngay" ).datepicker( "option", "minDate", selectedDate );
			 }
			 });
			 $( "#denngay" ).datepicker({
				 dateFormat:"dd-mm-yy",
			 defaultDate: "+1w",
			 changeMonth: true,
			 changeYear: true,
			 numberOfMonths: 3,
			 onClose: function( selectedDate ) {
			 $( "#tungay" ).datepicker( "option", "maxDate", selectedDate );
			 }
			 });
		
		
		$("#search").click(function() {
			
			$("#form").attr("action", "{{ path('acme_Baocaonhanluc') }}");
	        $("#form").submit();
        });
		
		
		
		$('#report').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Tổng số nhân lực có {{arrTuoi.tongnv}} người'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                            	if(this.name == 'Dưới 30({{arrTuoi.tuoidoi1}} người)'){
                            		doSearch("1");
                            	} else if(this.name == '30->40({{arrTuoi.tuoidoi2}} người)'){
                            		doSearch("2");
                            	} else if(this.name == '40->50({{arrTuoi.tuoidoi3}} người)'){
                            		doSearch("3");
                                } else if(this.name == 'Trên 50({{arrTuoi.tuoidoi4}} người)'){
                                	doSearch("4");
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Phầm trăm',
                data: [
                    ['Dưới 30({{arrTuoi.tuoidoi1}} người)',{{arrTuoi.phantram1}}],
                    ['30->40({{arrTuoi.tuoidoi2}} người)',{{arrTuoi.phantram2}}],
                    ['40->50({{arrTuoi.tuoidoi3}} người)',{{arrTuoi.phantram3}}],
                    ['Trên 50({{arrTuoi.tuoidoi4}} người)',{{arrTuoi.phantram4}}]
                ]
            }]
        });
    
		
	});
	function doSearch(type){
		  $( "#list" ).show();
	        $('#tt').datagrid('load',{  
	            type: type
	        });  
	    }
	

</script>

{% endblock %} {% block content %}
<div class="grid_16">
	<!-- TABS START -->
	<div id="tabs">
		<div class="container">
			<ul>
			<li><a href="{{ path('acme_Baocaonhanluc') }}"  class="current"><span>Báo cáo nhân lực</span></a></li>
				<li><a href="{{ path('acme_Baocaocongtac') }}"><span>Báo cáo số năm công tác
                            </span></a></li>
                <li><a href="{{ path('acme_Baocaotuoidang') }}" "><span>Báo cáo tuổi đảng</span></a></li>
				<li><a href="{{ path('acme_Baocaotrinhdo') }}" ><span>Báo cáo trình độ</span></a></li>
				<li><a href="{{ path('acme_Baocaothidua') }}"><span>Báo cáo thi đua</span></a></li>
			</ul>
		</div>
	</div>
	<!-- TABS END -->
</div>
<div class="grid_16" id="content">

	<div class="grid_9">
		<h1 class="report">Báo cáo nhân lực</h1>
	</div>


	<div class="grid_16">
		<form id="form" method="post">
			<table width="100%">
            <tr>
                <td width="30%">Từ ngày <input class="smallInput" name="tungay" id="tungay" value="{{from}}"
                     type="text">
                </td>
                <td width="30%">Đến ngày <input class="smallInput" name="denngay" id="denngay" value="{{to}}"
                     type="text">
                </td>
                <td width="40%">&nbsp; 
                <a id="search" class="button_grey_round">
<span>Tìm kiếm</span>
</a>
                </td>
            </tr>
            </table>
		</form>
	</div>
	   <div style="width: 940px;display: inline;float: left;">
	       <div id="report" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
	
        </div>
        <div id="list" class="grid_16">

            <table id="tt" class="easyui-datagrid" title="Danh sách nhân viên"
                style="width: 900px" rownumbers="true" pagination="true"
                data-options="rownumbers:true,singleSelect:true,url:'{{ path('acme_baocao_nhanluc_json') }}'">
                <thead data-options="frozen:true">
                    <tr>
                        <th data-options="field:'hoten',width:200">Họ tên</th>
                    </tr>
                </thead>
                <thead>
                    <tr>
                        <th data-options="field:'diachi',width:400,align:'center'">Địa
                            chỉ</th>
                        <th data-options="field:'ngaysinh',width:90,align:'center'">Ngày
                            sinh</th>
                        <th data-options="field:'dienthoai',width:90,align:'center'">Điện
                            thoại</th>
                        <th data-options="field:'phongban',width:90,align:'center'">Phòng
                            ban</th>
                        <th data-options="field:'chucvu',width:90,align:'center'">Chức
                            vụ</th>
                        <th data-options="field:'ngayvaolam',width:90,align:'center'">Ngày
                            vào làm</th>
                        <th data-options="field:'ngayvaodang',width:90,align:'center'">Ngày
                            vào đảng</th>
                        <th data-options="field:'trinhdo',width:90,align:'center'">Trình
                            độ</th>
                        <th data-options="field:'mucluong',width:50,align:'center'">Mức
                            lương</th>
                        <th data-options="field:'hesoluongcv',width:50,align:'center'">Hệ
                            số lương cv</th>
                        <th data-options="field:'tinhbaohiem',width:50,align:'center'">Tính
                            bảo hiểm</th>
                        <th data-options="field:'tinhantrua',width:50,align:'center'">Tính
                            ăn trưa</th>
                        <th data-options="field:'tienphucap',width:90,align:'center'">Tiền
                            phụ cấp</th>
                    </tr>
                </thead>
            </table>
        
            

        </div>
        </div>
{% endblock %}
